<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jq实现注册</title>
<style type="text/css">
#code{
    width:100px;
    height:40px;
    font-size:20px;
    font-family:Arial; 
    font-style:italic; 
    font-weight:bold; 
    border:0; 
    letter-spacing:2px; 
    color:blue; 
    margin-left: 15px;
}
#bigkuang{
     margin: auto;
     width: 700px;
     height: 1000px;
}
#check{
    border-radius: 7px;
    background-color: deepskyblue;
    width: 200px;
    height: 40px;
    display: block;
    margin-top: 30px;
    margin-left: 70px;
}
#kuang{
    height: 480px;
    background-color: turquoise;
}
.divcontent{
     margin-left: 150px;
     height: 40px;
     margin-top: 5px;
}
.r-font{
    display: inline-block;
    height: 32px;
    width: 70px;
    text-align: center;
    border-style: solid;
    border-width: 1px;
    padding-top: 5px;
    border-radius: 10px 0% 0% 10px;
    border-right: none;
    background-color:pink;
}
.info{
    height: 33px;
    border-left: none;
    border-style: solid;
    border-width: 1px;
    border-radius: 0px 10px 10px 0px;
}
</style>
</head>
<body>
    <div id="bigkuang">
        <form action="" id="register" class="cmxform" method="get">
<fieldset id="kuang"> 
    <legend>注册界面</legend>
    <div class="divcontent"><div class="r-font">用户名</div><input type = "text" id ="username" name="username" class="info" placeholder="请输入用户名"/></div>
    <div class="divcontent"><div class="r-font">设置密码</div><input type = "password" id ="password1" name="password1" class="info" placeholder="请输入密码"/></div>
    <div class="divcontent"><div class="r-font">重复密码</div><input type = "password" id ="password2" name="password2" class="info" placeholder="请再次输入密码"/></div>
    <div class="divcontent"><div class="r-font">电话号</div><input type = "text" id ="phone" name="phone" class="info" placeholder="请输入您的电话号码"/></div>
    <div class="divcontent"><div class="r-font">邮箱</div><input type = "email" id ="email" name="email" class="info" placeholder="请输入您的邮箱"/></div>
    <div class="divcontent"><div class="r-font">验证码</div><input type = "text" id ="authcode" name="authcode" class="info" placeholder="请输入右图验证码"/> 
    <input type = "button" id="code" />
    <input type = "submit" value = "提交注册" id="check" /> </div>

</fieldset> </form></div>

<script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<script type="text/javascript">

function change(){
    code=$("#code");
    // 验证码组成库
    var arrays=new Array( 
       '1','2','3','4','5','6','7','8','9','0','a','b','c','d','e','f','g','h','i','j', 
       'k','l','m','n','o','p','q','r','s','t', 'u','v','w','x','y','z', 
       'A','B','C','D','E','F','G','H','I','J', 'K','L','M','N','O','P','Q','R','S','T', 
       'U','V','W','X','Y','Z'        
    ); 
    codes='';// 重新初始化验证码
    for(var i = 0; i<5; i++){
    // 随机获取一个数组的下标
    var r = parseInt(Math.random()*arrays.length);
    codes += arrays[r];//把他们连接起来
    }
  // 验证码添加到input里
    code.val(codes);
}
change();
code.click(change);//点击重新生成验证码

//这是用jQuery和js逻辑验证写的
//单击验证
$("#check").click(function(){//邮箱是可选项，不输入也没事，所以这里不做检测合法
    //将所有的表单值获取存入变量
    var username=$("#username").val();
    var password1=$("#password1").val();
    var password2=$("#password2").val();
    var phone=$("#phone").val();
    var inputCode = $("#authcode").val().toUpperCase(); //取得输入的验证码并转化为大写 
    //首先判断输入的所有数是否为空
    // if(username==''||password1==''||password2==''||phone==''||inputCode.length == 0){
    //     alert('不允许有除邮箱以外的空信息，请检查您输入的信息');
    //     return 
    // }
    //再判断两次密码输入是否一致
    // if(password1!=password2){
    //     alert('您两次输入的密码不一致，请重新输入');
    //     $("#password1").val("");
    //     $("#password2").val("");
    //     return
    // }
    //判断电话号码的合法性
    const flag = /^[1][3,4,5,6,7,8,9][0-9]{9}$/
    if(!flag.test(phone)){//test方法,返回值为布尔型
        alert('您的手机号码不属于有效的中国正常手机号，请检查后输入')
        return
    }
    //判断验证码合法性
    if(inputCode!=codes.toUpperCase()) { //若输入的验证码与产生的验证码不一致时
        alert("验证码输入错误!请重新输入"); //则弹出验证码输入错误
        change();//刷新验证码
        $("#authcode").val("");//清空文本框
    }
    // else { //输入正确时
    //     alert("正确,您已注册成功^-^"); //弹出^-^
    //     $("#authcode").val("");//清空验证码文本框
    //     change();
    // } 
});
</script>
<script src="https://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
<script src="https://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
<script src="https://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
<script>
    //199000932刘澳琳
    $.validator.setDefaults({
        submitHandler: function() {//如果满足下面所有验证条件，提交成功，就执行以下方法
          alert("恭喜您，注册成功!^-^");
        }
    });
    $().ready(function() {
    // 在键盘按下并释放及提交后验证提交表单
      $("#register").validate({
            rules:{//定义规则
              username: {
                required: true,
                minlength: 6   //最小账号长度设置为6
              },
              password1: {
                required: true,
                minlength: 8,   //最小密码长度设置为8
                maxlength:20,
                //rangelength:[8,20] //也可以用这个输入长度8-20的字符
              },
              password2: {
                required: true,
                equalTo: "#password1"//等于password1
              },
              email: {
                required: true,
                email: true
              },
              phone: {
                required: true,
                minlength:11
              },
              authcode: {
                required: true,
              },
            },
            messages: {//触发规则后执行
              username: {
                required: "请输入用户名",
                minlength: "用户名至少由 6 个字母组成"
              },
              password1: {
                required: "请输入密码",
                minlength: "密码长度不能小于 8 个字母",
                maxlength:"密码最长不能超过20个，请您删减",
                //rangelength:"请设置密码8-20位"
              },
              password2: {
                required: "请再次输入密码",
                equalTo: "两次密码输入不一致"
              },
              email: "请输入一个正确的邮箱",
              phone: {
                required: "请输入手机号码",
                minlength: "请输入长度为11的手机号码",
              },
              authcode: {
                required: "请输入验证码",
              }
            }
        });
    });
    </script>
 </body>
</html>
